<template>
  <div>
    <h1>HOME</h1>
    <!--动态路由的参数传递 -->
    <!-- 使用params传递参数 -->
    <router-link tag="button" to="/home/show/张三/180" active-class="active"
      >music</router-link
    >
    <router-link
      tag="button"
      :to="{
        name: 'Show',
        params: {
          name: '李四',
          age: 45,
        },
      }"
      active-class="active"
      >Kuguo</router-link
    >
    <router-link
      tag="button"
      :to="{
        name: 'Show',
        params: {
          name: '王五',
          age: 45,
        },
      }"
      active-class="active"
      >work</router-link
    >
    <router-link tag="button" to="/home/show/赵六" active-class="active"
      >play</router-link
    >
    <button @click="Navi($event)">编程式跳转</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    Navi(e) {
      e.target.classList.add('active')
      this.$router.push({
        params: {
          name: '编程',
          age: '7',
        },
      })
    },
  },
}
</script>

<style>
button {
  height: 30px;
  width: 100px;
  border: none;
}
.active {
  background: orange;
  color: #fff;
}
</style>
